<template>
  <view>
    <view class="intervals">
      <view class="templeBox">
        <image
          v-if="type == 1"
          class="bg"
          src="https://www.123qifu.com/onlineimages/static/bgc7.png"
          mode="widthFix"
        ></image>
        <image
          v-if="type == 2"
          class="bg"
          src="https://www.123qifu.com/onlineimages/static/bgc8.png"
          mode="widthFix"
        ></image>
        <image
          v-if="type == 3"
          class="bg"
          src="https://www.123qifu.com/onlineimages/static/bgc9.png"
          mode="widthFix"
        ></image>
        <image
          v-if="type == 4"
          class="bg"
          src="https://www.123qifu.com/onlineimages/static/bgc10.png"
          mode="widthFix"
        ></image>
        <view class="templeMoney">
          <view class="title">寺院修缮</view>
          <view class="fbt">
            <image
              class="dzimg"
              src="https://www.123qifu.com/onlineimages/static/dz1.png"
              mode=""
            />
            您的布施
          </view>
          <view class="inputs">
            <input type="digit" v-model="price" placeholder="请输入您的布施" />
          </view>
          <view class="fbt">
            <image
              class="dzimg"
              src="https://www.123qifu.com/onlineimages/static/dz2.png"
              mode=""
            />
            您的名字
          </view>
          <view class="inputs">
            <input
              type="text"
              v-model="compellation"
              placeholder="请留下您的名字"
            />
          </view>
          <view type="default" @click="buys" class="btn">提交</view>
        </view>
      </view>
    </view>

    <!-- 支付方式 -->
    <uni-popup ref="popupPay" type="bottom">
      <view class="payboxs">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <view class="zfje">
            支付金额：<text style="color: #c52b2e">{{ price || "0" }}元</text>
          </view>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yue.png"
                mode=""
              />
              <view class="col">
                <text>余额</text>
              </view>
            </view>
            <image
              v-if="actives == 0"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/yonj.png"
                mode=""
              />
              <view class="col">
                <text>佣金</text>
              </view>
            </view>
            <image
              v-if="actives == 1"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(2)">
            <view class="left">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/wechat.png"
                mode=""
              />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="actives == 2"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/ridos.png"
              mode=""
            />
            <image
              v-else
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
          </view>
        </scroll-view>
        <view class="pbtn" @click="comnfirmPay">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="https://www.123qifu.com/onlineimages/static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
        ></validcode>
      </view>
    </uni-popup>
    <uni-popup ref="popsuccue" type="center">
      <view class="popsuccue">
        <view class="txt">{{ text }}</view>
        <view class="btn" @click="cancell">确定</view>
        <view class="close" @click="cancell"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  data() {
    return {
      toView: "",
      price: "",
      compellation: "",
      flag: true,
      type: "",
      title: "", // 标题
      myname: "",
      show: false,
      token: "",
      actives: 2, // 支付方式
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
      text: "",
      userInfo: "",
    };
  },
  components: {
    uniPopup,
  },
  onLoad(e) {
    this.type = e.type;
    if (this.type == "1") {
      wx.setNavigationBarTitle({
        title: "寺院修建",
      });
    } else if (this.type == "2") {
      wx.setNavigationBarTitle({
        title: "消灾祈愿",
      });
    } else if (this.type == "3") {
      wx.setNavigationBarTitle({
        title: "弘法利生",
      });
      this.title = "弘法利生";
    } else {
      wx.setNavigationBarTitle({
        title: "还愿报恩",
      });
    }
    this.token = uni.getStorageSync("token");
    this.userInfo = uni.getStorageSync("userInfo");
  },
  onShow() {
    this.getuserInfo();
  },
  methods: {
    buys() {
      this.price = "";
      this.compellation = "";
      uni.showToast({
        title: "感谢您的乐善好施",
        icon: "none", 
      });
    },
    // 获取用户信息
    async getuserInfo() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/getUserInfo",
        method: "GET",
        data: {},
      });
      if (res.data.code == 1) {
        that.userInfo = res.data.data;
        uni.setStorageSync("userInfo", res.data.data);
      }
    },
    // 下订单
    async buy() {
      if (this.price == "") {
        uni.showToast({
          title: "请输入您的布施金额",
          icon: "none",
        });
        return;
      }
      if (this.compellation == "") {
        uni.showToast({
          title: "请留下您的名字",
          icon: "none",
        });
        return;
      }
      const res = await this.$myRequest({
        url: "user/addElectronicMeritBox",
        method: "POST",
        data: {
          type: this.type,
          money: this.price,
          names: this.compellation,
        },
      });
      if (res.data.code == 1) {
        this.orderCode = res.data.msg;
        this.$refs.popupPay.open(); // 选择支付方式
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    //选择支付方式
    changeActive(id) {
      this.actives = id;
      if (id == 0) {
        this.isCommission = 0;
      } else if (id == 1) {
        this.isCommission = 1;
      } else if (id == 2) {
        this.payment = "wx";
      }
    },
    // 确定支付
    comnfirmPay() {
      this.$refs.popupPay.close();
      if (this.actives == 0 || this.actives == 1) {
        // 判断是否设置支付密码
        if (this.userInfo.isSetPayPassword) {
          // 余额和佣金支付需要支付密码
          this.$refs.popPasword.open();
        } else {
          uni.showToast({
            title: "请先设置支付密码",
            icon: "none",
          });
          setTimeout(function () {
            uni.navigateTo({
              url: "../../orderPackages/pages/balance/balance",
            });
          }, 1000);
        }
      } else {
        this.h5Pay(); // 微信支付
      }
    },
    // 清楚支付密码
    clickParent() {
      this.$refs.pwd.clear();
    },
    // 支付密码输入完成
    getPwd(val) {
      this.moneyPay(val);
    },
    async moneyPay(val) {
      const res = await this.$myRequest({
        url: "pay/moneyPay",
        method: "POST",
        data: {
          orderCode: this.orderCode,
          isCommission: this.isCommission,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        this.text = res.data.msg;
        this.$refs.popPasword.close();
        this.$refs.popsuccue.open();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },

    // 微信支付
    async h5Pay() {
      let that = this;
      const datas = await this.$myRequest({
        url: "pay/wx_pay",
        method: "POST",
        data: {
          order_sn: this.orderCode, //订单号
          fromByXcx: 1,
        },
      });
      if (datas.data.code == 1) {
        wx.requestPayment({
          appId: datas.data.data.appId, //公众号名称，由商户传入
          timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: datas.data.data.nonceStr, //随机串
          package: datas.data.data.package,
          signType: datas.data.data.signType, //微信签名方式：
          paySign: datas.data.data.paySign, //微信签名
          success: function (res) {
            if (res.errMsg == "requestPayment:ok") {
              uni.request({
                url: "https://www.123qifu.com/api/pay/weixin_getList",
                method: "POST",
                header: {
                  token: that.token,
                },
                data: {
                  order_sn: that.orderCode,
                  fromByXcx: 1,
                },
                success: (res) => {
                  if (res.data.code == 1) {
                    that.text = res.data.msg;
                    that.$refs.popsuccue.open();
                  } else {
                    uni.showToast({
                      title: res.data.msg,
                      icon: "none",
                    });
                  }
                },
              });
            }
          },
          fail: function (res) {},
          complete: function (res) {},
        });
      }
    },

    // 关闭弹窗
    cancell() {
      this.$refs.popupPay.close();
      this.$refs.popPasword.close();
      this.$refs.popsuccue.close();
      this.clickParent();
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #eee;
}
.templeBox {
  width: 100%;
  box-sizing: border-box;
  .bg {
    display: block;
    width: 100%;
    height: 410rpx;
    position: relative;
    z-index: 1;
  }
  .templeMoney {
    width: 702rpx;
    height: 700rpx;
    background: #ffffff;
    border-radius: 22rpx;
    box-sizing: border-box;
    margin: -165rpx auto 0;
    position: relative;
    z-index: 9;
    overflow: hidden;
    .title {
      position: relative;
      text-align: center;
      font-size: 34rpx;
      font-weight: 500;
      color: #c52b2e;
      margin-top: 50rpx;
    }
    .title::before {
      position: absolute;
      content: "";
      width: 72rpx;
      height: 30rpx;
      background: url("https://www.123qifu.com/onlineimages/static/xyL.png")
        no-repeat;
      background-size: 100% 100%;
      left: 180rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .title::after {
      position: absolute;
      content: "";
      width: 72rpx;
      height: 30rpx;
      background: url("https://www.123qifu.com/onlineimages/static/xyR.png")
        no-repeat;
      background-size: 100% 100%;
      right: 180rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .fbt {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 36rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      margin-top: 80rpx;
      .dzimg {
        display: block;
        width: 26rpx;
        height: 26rpx;
        margin-right: 17rpx;
      }
    }
    .inputs {
      width: 590rpx;
      box-sizing: border-box;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;
      margin: 0 76rpx;
      input {
        font-size: 26rpx;
        font-weight: 400;
      }
      input::-webkit-input-placeholder {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}
.btn {
  width: 250rpx;
  height: 66rpx;
  background: #c52b2e;
  border-radius: 33rpx;
  text-align: center;
  line-height: 66rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  margin: 80rpx auto 0;
}
.payboxs {
  width: 100%;
  height: 700rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  position: relative;
  z-index: 999;
  .zfje {
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    padding: 30rpx;
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
    .zfje {
      width: 100%;
      text-align: center;
    }
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .col {
        text {
          display: block;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    > .img {
      display: block;
      width: 34rpx;
      height: 34rpx;
    }
  }
  .pop_two:last-of-type {
    border-bottom: none;
  }
  .pbtn {
    width: 250rpx;
    height: 66rpx;
    text-align: center;
    line-height: 66rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 70rpx auto 0;
  }
}
.boxs {
  width: 100%;
  height: 1000rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  position: relative;
  z-index: 999;
  &.boxss {
    height: 500rpx;
    .selectPopup_one {
      margin-bottom: 50rpx;
      text {
        font-size: 34rpx;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .scroll-y {
    height: 90%;
  }
  .xiaofei {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690rpx;
    margin: 50rpx auto 0;
    padding-bottom: 40rpx;
    border-bottom: 1px dashed;
    .fukuan {
      display: flex;
      align-items: center;
    }
  }
  .xiaofei:last-of-type {
    border-bottom: none;
  }
}
.popsuccue {
  width: 478rpx;
  min-height: 506rpx;
  background: url("https://www.123qifu.com/onlineimages/static/popBg.png")
    no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-top: 1rpx;
  border-radius: 20rpx;
  position: relative;
  z-index: 999;
  .txt {
    width: 100%;
    text-align: center;
    font-size: 26rpx;
    color: #333333;
    margin-top: 295rpx;
    box-sizing: border-box;
    padding: 0 65rpx;
  }
  .btn {
    width: 250rpx;
    height: 66rpx;
    background: #c52b2e;
    border-radius: 33rpx;
    text-align: center;
    line-height: 66rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 36rpx auto;
  }
  .close {
    position: absolute;
    width: 66rpx;
    min-height: 66rpx;
    background: url("https://www.123qifu.com/onlineimages/static/popclose.png")
      no-repeat;
    background-size: 100% 100%;
    bottom: -100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
